<!--
 * @Autor: ZN
 * @LastEditors: ZN
 * @Date: 2023-04-27 16:51:27
 * @LastEditTime: 2023-05-11 10:28:12
 * @Description: 首页第一个echarts 图
-->
<template>
  <div class="chart-content">
    <charts :options="option"></charts>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import charts from "@/components/common/charts.vue";
import request from "@/utils/request";
import { getLineCharts } from "@/service/home/home";

const option = ref({
  tooltip: {
    show: true,
    trigger: "axis",
    formatter: "{b0}: {c0}",
  },
  grid: {
    left: "6%",
    right: "5%",
    bottom: 22,
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisTick: {
      show: false,
    },
    axisLabel: {
      color: "#333",
      fontSize: 13,
      fontFamily: "Albbpht",
    },
    data: [],
  },
  yAxis: {
    name: "本",
    type: "value",
    nameTextStyle: {
      padding: [0, 0, 0, -22],
    },
  },
  series: [
    {
      showSymbol: false,
      symbol: "circle",
      smooth: true,
      data: [],
      type: "line",
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(43,254,192, 1)", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "rgba(43,254,192, 0.1)", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      lineStyle: {
        color: "rgba(43,254,192, 1)",
      },
    },
  ],
});

// 请求数据
const getData = async () => {
  let result = await getLineCharts();
  option.value.xAxis.data = result.data.data.map((item) => item.label);
  option.value.series[0].data = result.data.data.map((item) => item.value);
};
getData();
</script>

<style scoped lang="scss">
.chart-content {
  width: 100%;
  height: 100%;
}
</style>
